<template>
  <v-app>
    <v-main>
      <v-container fill-height text-center align-center>
        <v-row align="center" justify="center">
          <v-col cols="12" sm="8" md="4">
            <v-card
                v-if="curStep === 'emailStep'"
                class="elevation-16"
                min-width="400px">
              <v-toolbar color="primary" dark flat>
                <v-toolbar-title>注册</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-btn color="info" @click="goToLogin">去登陆</v-btn>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field
                      label="企业名"
                      prepend-icon="mdi-city"
                      v-model="enterprise"
                      type="text"
                      @change="checkEnterprise()"
                      :error-messages="enterpriseError ? [enterpriseError] : []"
                      required
                  ></v-text-field>
                  <v-text-field
                      label="邮箱"
                      prepend-icon="mdi-email"
                      v-model="email"
                      type="email"
                      @change="checkEmail()"
                      :error-messages="emailError ? [emailError] : []"
                      required
                  ></v-text-field>
                  <v-text-field
                      label="姓名"
                      prepend-icon="mdi-account"
                      v-model="name"
                      :error-messages="nameError ? [nameError] : []"
                      @change="checkName()"
                      required
                  ></v-text-field>
                  <v-text-field
                      label="电话"
                      prepend-icon="mdi-phone"
                      v-model="phone"
                      :error-messages="phoneError ? [phoneError] : []"
                      @change="checkPhone()"
                      required
                  ></v-text-field>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" block @click="nextStep">下一步</v-btn>
              </v-card-actions>
            </v-card>
            <v-card
                v-else
                class="elevation-16"
                max-width="400px">
              <v-toolbar color="primary" dark flat>
                <v-toolbar-title>注册</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-btn color="info" @click="goToLogin">去登陆</v-btn>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field
                      label="密码"
                      prepend-icon="mdi-lock"
                      :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                      v-model="password"
                      :type="showPassword ? 'text' : 'password'"
                      required
                      :error-messages="pwdError ? [pwdError] : []"
                      @click:append="toggleShowPassword"
                  ></v-text-field>
                  <v-text-field
                      label="确认密码"
                      prepend-icon="mdi-lock"
                      :append-icon="showConfirmPassword ? 'mdi-eye' : 'mdi-eye-off'"
                      v-model="confirmPassword"
                      :type="showConfirmPassword ? 'text' : 'password'"
                      required
                      @change="checkPassword"
                      :error-messages="pwdError ? [pwdError] : []"
                      @click:append="toggleShowConfirmPassword"
                  ></v-text-field>
                  <v-snackbar
                      v-model="snackbar.show"
                      :color="snackbar.color"
                      :timeout="3000"
                      multi-line
                      top>
                    <template>
                      <v-icon v-if="snackbar.icon" :color="snackbar.iconColor">{{ snackbar.icon }}</v-icon>
                    </template>
                    {{ snackbar.text }}
                    <v-spacer></v-spacer>
                  </v-snackbar>
                </v-form>
                <v-row>
                  <v-col>
                    <v-text-field
                        label="请输入验证码"
                        v-model="verificationCode"
                        dense
                        prepend-icon="mdi-no-icon"
                        type="text"
                        :error-messages="valNumError ? [valNumError] : []"
                    ></v-text-field>
                  </v-col>
                  <v-col>
                    <v-btn
                        :disabled="isGettingCode"
                        color="info"
                        @click="startCountdown"
                    >{{ isGettingCode ? `获取验证码(${timeLeft})` : '获取验证码' }}
                    </v-btn>
                  </v-col>
                </v-row>
                <div class="checkbox-container">
                  <div class="d-flex align-center">
                    <input type="checkbox" id="agree" v-model="agreeToTerms" class="mr-2"/>
                    <label for="agree">
                      我已阅读并同意《 <a href="#" @click="dialog = true">协议</a> 》
                    </label>
                  </div>
                </div>
              </v-card-text>
              <v-card-actions>
                <v-btn color="primary" @click="lastStep">上一步</v-btn>
                <v-spacer></v-spacer>
                <v-btn color="warning" @click="register">注册</v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
    <v-dialog
        v-model="dialog"
        persistent
        max-width="600px">
      <!-- 标题栏 -->
      <v-card flat style="border-bottom-left-radius: 0; border-bottom-right-radius: 0;">
        <v-toolbar dense>
          <v-toolbar-title>ETEcon 软件版权声明</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="dialog = false">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-toolbar>
      </v-card>
      <v-card flat style="border-top-left-radius: 0;
      border-top-right-radius: 0;
      overflow-y:auto; height: 300px;padding-top: 3vh;">
        <v-card-text>
          <!-- 长文本内容 -->
          <ol>
            <li>
              <strong>版权归属</strong>
              <p>ETEcon 软件（以下简称 “本软件”）由 东莞市盖利克自动化科技有限公司
                开发并拥有版权。本软件的所有权利，包括但不限于版权、商标权、专利权以及其他知识产权，均归 东莞市盖利克自动化科技有限公司
                所有。</p>
            </li>
            <li>
              <strong>使用许可</strong>
              <p>用户被授予有限的、非排他性的、不可转让的许可，仅可在符合本软件的使用条款和条件的情况下，为个人或商业目的使用本软件。
                用户不得复制、修改、分发、出租、出售、反向工程、反编译本软件，或进行任何其他可能侵犯本软件版权的行为。</p>
            </li>
            <li>
              <strong>限制与禁止</strong>
              <p>用户不得使用本软件进行任何非法活动，包括但不限于侵犯他人知识产权、传播恶意软件、进行网络攻击等。
                用户不得删除、修改或掩盖本软件中的任何版权声明、商标或其他标识。</p>
            </li>
            <li>
              <strong>免责声明</strong>
              <p>本软件是在 “按现状” 的基础上提供的，不提供任何形式的担保，包括但不限于对适销性、特定用途适用性或不侵权的担保。
                东莞市盖利克自动化科技有限公司
                对于因使用本软件而导致的任何直接、间接、偶然、特殊或后果性的损失，包括但不限于数据丢失、利润损失、业务中断等，不承担任何责任。</p>
            </li>
            <li>
              <strong>法律适用与争议解决</strong>
              <p>本版权声明受 [适用法律所在地] 法律的管辖。
                如发生与本版权声明有关的争议，双方应首先通过友好协商解决；协商不成的，任何一方均可向有管辖权的人民法院提起诉讼。</p>
            </li>
            <li>
              <strong>其他条款</strong>
              <p>东莞市盖利克自动化科技有限公司 有权随时修改本版权声明的内容，并在本软件的相关页面公布修改后的版本。用户在继续使用本软件时，应视为已接受修改后的版权声明。
                如果本版权声明的任何条款被认定为无效或不可执行，该条款将被视为从本版权声明中删除，而不影响本版权声明的其他条款的有效性和可执行性。</p>
            </li>
          </ol>
          <p>特此声明。</p>
          <p>东莞市盖利克自动化科技有限公司</p>
          <p>2024.10.10</p>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-app>
</template>

<script>
import axios from "axios";
// import jwt_decode from "jwt-decode";

export default {
  data() {
    return {
      enterprise: '',
      enterpriseError: '',
      email: '',
      emailError: '',
      dialog: false,
      curStep: "emailStep",
      password: '',
      confirmPassword: '',
      pwdError: '',
      showPassword: false,
      showConfirmPassword: false,
      phone: '',
      phoneError: '',
      name: '',
      nameError: '',
      snackbar: {
        show: false,
        color: '',
        text: '',
        icon: '',
        iconColor: ''
      },
      agreeToTerms: false, // 用于勾选协议
      verificationCode: '', // 验证码输入框
      isGettingCode: false, // 是否正在获取验证码
      valNumError: '',
      timeLeft: 0, // 倒计时时间
      verified: false,
    };
  },
  methods: {
    checkEnterprise() {
      this.enterpriseError = '';
      if (this.enterprise === '') {
        this.enterpriseError = '企业名不能为空';
        return true;
      }
      return false;
    },
    checkEmail() {
      this.emailError = '';
      // 验证邮箱
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailPattern.test(this.email)) {
        this.emailError = '请输入有效的邮箱地址';
        return true;
      }
      return false;
    },
    checkName() {
      this.nameError = '';
      if (this.email === '') {
        this.phoneError = '邮箱号不能为空';
        return true;
      } else if (this.name === '') {
        this.nameError = '姓名不能为空';
        return true;
      }
      return false;
    },
    checkPhone() {
      this.phoneError = '';
      const phoneReg = /(^1\d{10})$|(^[0-9]\d{7}$)/;
      if (this.phone === '') {
        this.phoneError = '手机号不能为空';
        return true;
      } else if (!phoneReg.test(this.phone)) {
        this.phoneError = '手机号有误';
        return true;
      }
      return false;
    },
    checkPassword() {
      this.pwdError = '';
      if (this.password.length < 6) {
        this.pwdError = '密码长度不能小于6';
        return true;
      }
      if (this.password !== this.confirmPassword) {
        this.pwdError = '两次密码不一致';
        return true;
      }
    },
    toggleShowPassword() {
      this.showPassword = !this.showPassword
    },
    toggleShowConfirmPassword() {
      this.showConfirmPassword = !this.showConfirmPassword
    },
    lastStep() {
      this.curStep = 'emailStep'
      this.snackbar.show = false;
    },
    nextStep() {
      // 可以在这里添加逻辑，比如验证邮箱格式，然后导航到密码配置页
      // this.$router.push({ path: '/register/step2' });
      if (this.checkEnterprise() || this.checkEmail() || this.checkName() || this.checkPhone()) return;
      this.curStep = "pwdStep";
    },
    startCountdown() {
      if (!this.isGettingCode) {
        axios.post(`${this.$serverUrl}/api/doRegister/getVerificationCode`, {
          "email": this.email
        }).then(response => {
          // console.log(response)
          if (response.data === "success") {
            this.isGettingCode = true;
            this.timeLeft = 60;
            const interval = setInterval(() => {
              if (this.timeLeft > 0) {
                this.timeLeft--;
              } else {
                clearInterval(interval);
                this.isGettingCode = false;
              }
            }, 1000);
            this.setSnackBarTrue("验证码已发送至邮箱，有效时间10分钟");
          } else this.setSnackBarFalse("发送失败，请检查网络设置")
        }).catch(error => {
          console.log(error)
          if (error) this.setSnackBarFalse("发送失败，请检查网络设置")
        })
      }
    },
    async sendVerificationCode() {
      try {
        const response = await axios.post(`${this.$serverUrl}/api/doRegister/verify`, {
          "email": this.email,
          "code": this.verificationCode
        });
        return response.data === 'success';
      } catch (error) {
        console.error(error);
      }
    },
    async checkVerificationCode() {
      this.verified = true;
      if (this.verificationCode === '') {
        this.setSnackBarFalse('请输入验证码');
        return true; // 验证码为空，返回true
      }
      const result = this.sendVerificationCode();
      if (result) {
        this.verified = false;
      } else {
        this.setSnackBarFalse('验证码有误');
      }
      return this.verified;
    },
    async register() {
      if (!this.agreeToTerms) {
        this.setSnackBarFalse('请勾选同意协议');
        return;
      }
      if (this.checkPassword()) return;
      if (await this.checkVerificationCode()) return;
      const registerData = {
        enterprise: this.enterprise,
        username: this.email,
        password: this.password,
        name: this.name,
        phone: this.phone
      }
      axios.post(`${this.$serverUrl}/api/doRegister/do`, registerData)
          .then(response => {
            // console.log(response);
            this.setSnackBarTrue('注册成功');
            setTimeout(() => {
              localStorage.setItem('token', response.data.token);
              localStorage.setItem('refreshToken', response.data.refreshToken);
              this.$router.push('/');
            }, 500);
          })
          .catch(error => {
            // console.log(error)
            if (error.code === "ERR_NETWORK") {
              this.setSnackBarFalse('网络异常, 请检查网络设置');
            } else if (error.code === "ERR_BAD_RESPONSE") {
              this.setSnackBarFalse("邮箱号已被注册，请修改配置");
            } else if (error.response.data.errorCode === 2) {
              const msg = error.response.data.message;
              let jsonString = msg.match(/{.*}/)[0];
              jsonString = jsonString.replace(/\\/g, '');
              // console.log(jsonString)
              const msgArray = JSON.parse(jsonString);
              // console.log(msgArray)
              this.setSnackBarFalse(msgArray.message);
            }
          })
    },
    setSnackBar(show, color, text, icon, iconColor) {
      this.snackbar.show = show;
      this.snackbar.color = color;
      this.snackbar.text = text;
      this.snackbar.icon = icon;
      this.snackbar.iconColor = iconColor;
    },
    setSnackBarTrue(text) {
      this.setSnackBar(true, 'success', text, 'mdi-check', 'green');
    },
    setSnackBarFalse(text) {
      this.setSnackBar(true, 'error', text, 'mdi-close-circle', 'red');
    },
    goToLogin() {
      this.$router.push('/')
    }
  },
};
</script>

<style>
.checkbox-container {
  display: flex;
  justify-content: flex-end; /* 使内容靠右对齐 */
  margin-right: 16px; /* 添加一些下方的间距 */
}

.red-text {
  color: red;
}

.d-flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.mr-2 {
  margin-right: 8px;
}
</style>
